class AppUpdateQR extends React.Component {
    constructor(props) {
        super(props);
        this.page = 1;
        this.state = {
            list: '',
            id: 0,
            info: {
                id: '',
                appName: '',
                corporateName: '',
                appIoc: '',
                androidUri: '',
                iosUri: '',
                appIocUrl: '/pic/upload_ioc.png',
                description: ''
            }
        }
    }

    componentDidMount() {
        this.verify = {
            appName: function (value) {
                if (value.length < 2) {
                    return '应用名称至少得2个字符!';
                }
            },
            corporateName: function (value) {
                if (value.length < 2) {
                    return '公司名称至少得2个字符!';
                }
            },
            appIoc: (value) => {
                if (value.length < 5) {
                    return 'app图标必须上传！';
                }
            },
            androidUri: (value) => {
                let r = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;　　//url
                if (!r.test(value)) {
                    return 'android 下载地址错误！';
                }
            },
            iosUri: (value) => {
                let r = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;　　//url
                if (!r.test(value)) {
                    return 'ios 下载地址错误！';
                }
            }
        };
        this.queryList(1);
    }


    saveInfo(info) {
        this.setState({
            info: info ? info : {
                id: '',
                appName: '',
                corporateName: '',
                appIoc: '',
                androidUri: '',
                iosUri: '',
                appIocUrl: '/pic/upload_ioc.png',
                description: ''
            }
        }, () => {
            this.refs.save_modal.show();
        });
    }

    queryList(page) {
        //保证通过之后还是在当前页
        if (page > 1 && this.state.list.length === 1) {
            page = page - 1;
        }
        this.updateList(page, 10);
    }

    updateList(page, pageSize) {
        let params = {};
        params.page = page;
        params.pageSize = pageSize;
        postJson("/appupdateqr/queryAppUpdateQRList.x", params, (data) => {
            this.page = params.page;
            this.setState({
                list: data.data.list
            });
        });
    }

    tbody() {
        if (this.state.list) {
            return this.state.list.map((array) => {
                return (<tr>
                    <td>{array.appName}</td>
                    <td>{array.corporateName}</td>
                    <td>
                        <div className="Center-Container" style={divImgStyle}>
                            <img className="Absolute-Center" style={imgStyle}
                                 src={array.appIocUrl}/>
                        </div>
                    </td>
                    <td>{array.androidUri}</td>
                    <td>{array.iosUri}</td>
                    <td>{array.description}</td>
                    <td>
                        <Button size="xs" btnType="normal"
                                onClick={() => this.saveInfo(array)}>编辑</Button>
                        <Button size="xs" btnType="danger"
                                onClick={() => this.deleteInfo(array.id)}>删除</Button>
                        <Button size="xs" btnType="primary"
                                onClick={() => this.showImage(array.id)}>二维码</Button>
                    </td>
                </tr>)
            })
        }
    }

    showImage(id) {
        let param = 'id=' + id;
        if (id) {
            layer.photos({
                photos: {
                    "title": "图片",
                    "data": [
                        {
                            "src": '/appupdateqr/qrcode.x?' + param
                        }
                    ]
                }, anim: 5
            });
        } else {
            layer.msg("此记录无照片!");
        }
    }

    btnSubmit() {
        postJson("/appupdateqr/saveAppUpdateQR.x", this.state.info, (data) => {
            parent.layer.msg('添加成功', {icon: 6});
            this.queryList(this.page);
            this.refs.save_modal.close();
        });
    }

    deleteInfo(id) {
        let index = layer.confirm('确定要删除？', {
            btn: ['确定', '取消']
        }, () => {
            postJson("/appupdateqr/deleteAppUpdateQR.x", $.param({
                'id': id
            }), () => {
                this.queryList(this.page);
                layer.close(index);
            });
        });
    }

    inputOnchange(param, value) {
        this.state.info[param] = value;
        this.setState({info: this.state.info});
    }

    uploadImage = (event) => {
        console.log('Selected file:', event.target.files[0]);
        postUpload("/appupdateqr/updateAppIoc.x", {
            file: event.target.files[0]
        }, (event) => {
            console.log('event222: ', event.loaded / event.total * 100);
        }, (data) => {
            this.state.info.appIocUrl = data.data.appIocUrl;
            this.state.info.appIoc = data.data.appIoc;
            this.setState({});
        }, (error) => {

        });
    };


    render() {
        return <Frame header="厂家二维码信息管理"
                      headerBtns={[<HeaderBtn onClick={() => this.saveInfo()}>添加厂家二维码</HeaderBtn>]}>
            <Form type="pane" style={{overflow: 'auto'}}>
                <Table ref="table" count={this.page}
                       pageOnClick={(page, pageSize) => this.updateList(page, pageSize)}>
                    <colgroup>
                        <col width="150"/>
                        <col/>
                        <col/>
                        <col/>
                        <col/>
                        <col/>
                        <col width={this.isPerms ? 260 : 210}/>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>应用名称</th>
                        <th>公司名称</th>
                        <th>应用图标</th>
                        <th>android下载地址</th>
                        <th>ios下载地址</th>
                        <th>描述</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.tbody()}
                    </tbody>
                </Table>
                <Modal
                    title="添加厂家二维码"
                    ref="save_modal"
                    area={['800px']}>
                    <Form size="sm" id="save_form" type="pane" verify={() => {
                        return this.verify;
                    }}>
                        <Input
                            name="parkId"
                            type="hidden"
                            value={this.state.info.id}/>
                        <Item>
                            <Label width="hg">应用名称</Label>
                            <Input
                                type="text"
                                lay-verify="appName"
                                value={this.state.info.appName}
                                placeholder="请输入应用名称"
                                onChange={(value) => this.inputOnchange('appName', value)}/>
                        </Item>
                        <Item>
                            <Label width="hg">公司名称</Label>
                            <Input
                                type="text"
                                lay-verify="corporateName"
                                value={this.state.info.corporateName}
                                placeholder="请输入公司名称"
                                onChange={(value) => this.inputOnchange('corporateName', value)}/>
                        </Item>

                        <Item>
                            <Label width="hg">资源图标</Label>
                            <div className="layui-input-inline"
                                 style={{'background': '#FFFFFF', 'padding': '20px', 'border': '1px solid #e6e6e6'}}>

                                <UploadFile accept="image/jpeg,image/jpg,image/png,image/gif"
                                            onChange={(event) => this.uploadImage(event)}>
                                    <div className="Center-Container" style={divImgStyle}>
                                        <img className="Absolute-Center" style={imgStyle}
                                             src={this.state.info.appIocUrl}/>
                                    </div>
                                </UploadFile>

                                <div style={{font: '0px/0px sans-serif', clear: 'both', display: 'block'}}/>
                            </div>

                        </Item>

                        <Item>
                            <Label width="hg">android下载地址</Label>
                            <Input type="text"
                                   style={{width: "600px"}}
                                   lay-verify="androidUri"
                                   value={this.state.info.androidUri}
                                   placeholder="请输入android下载地址"
                                   onChange={(value) => this.inputOnchange('androidUri', value)}/>
                        </Item>
                        <Item>
                            <Label width="hg">ios下载地址</Label>
                            <Input
                                type="text"
                                style={{width: "600px"}}
                                lay-verify="iosUri"
                                value={this.state.info.iosUri}
                                placeholder="请输入ios下载地址"
                                onChange={(value) => this.inputOnchange('iosUri', value)}/>
                        </Item>
                        <Item>
                            <Label width="hg">描述</Label>
                            <Input
                                type="text"
                                style={{width: "600px"}}
                                lay-verify="description"
                                value={this.state.info.description}
                                placeholder="请输入描述"
                                onChange={(value) => this.inputOnchange('description', value)}/>
                        </Item>

                        <Item>
                            <Button btnType="normal" size="sm" formBtn="true" id="savebt" lay-submit="true"
                                    onClick={() => this.btnSubmit()}>新增保存</Button>
                        </Item>
                    </Form>
                </Modal>
            </Form>
        </Frame>
    }
}

let divImgStyle = {
    width: '100%',
    height: '100px'
};

let imgStyle = {
    'max-height': '100%',
    'max-width': '100%'
};

ReactDOM.render(<AppUpdateQR/>, document.getElementById('example'));
